<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>

</head>
<body>
<div id="app">
<!--    <el-row>-->
<!--        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>-->
<!--    </el-row>-->
<!--    <hr>-->
<!--    <el-row :gutter="20">-->
<!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
<!--    <hr>-->

<!--    <el-row :gutter="20">-->
<!--        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->
<!--    <el-row :gutter="20">-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>-->
<!--        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
<!--    </el-row>-->

<!--    <el-container>-->
<!--        <el-header>Header</el-header>-->
<!--        <el-main>Main</el-main>-->
<!--    </el-container>-->

<!--    <el-container>-->
<!--        <el-header>Header</el-header>-->
<!--        <el-main>Main</el-main>-->
<!--        <el-footer>Footer</el-footer>-->
<!--    </el-container>-->

<!--    <el-container>-->
<!--        <el-aside width="200px">Aside</el-aside>-->
<!--        <el-main>Main</el-main>-->
<!--    </el-container>-->

<!--    <el-container>-->
<!--        <el-header>Header</el-header>-->
<!--        <el-container>-->
<!--            <el-aside width="200px">Aside</el-aside>-->
<!--            <el-main>Main</el-main>-->
<!--        </el-container>-->
<!--    </el-container>-->

<!--    <el-container>-->
<!--        <el-header>Header</el-header>-->
<!--        <el-container>-->
<!--            <el-aside width="200px">Aside</el-aside>-->
<!--            <el-container>-->
<!--                <el-main>Main</el-main>-->
<!--                <el-footer>Footer</el-footer>-->
<!--            </el-container>-->
<!--        </el-container>-->
<!--    </el-container>-->

<!--    <el-container>-->
<!--        <el-aside width="200px">Aside</el-aside>-->
<!--        <el-container>-->
<!--            <el-header>Header</el-header>-->
<!--            <el-main>Main</el-main>-->
<!--        </el-container>-->
<!--    </el-container>-->

<!--    <el-container>-->
<!--        <el-aside width="200px">Aside</el-aside>-->
<!--        <el-container>-->
<!--            <el-header>Header</el-header>-->
<!--            <el-main>Main</el-main>-->
<!--            <el-footer>Footer</el-footer>-->
<!--        </el-container>-->
<!--    </el-container>-->

    <el-button type="primary" :loading="true">加载中</el-button>
    <div><!--链接-->
        <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
        <el-link type="primary">主要链接</el-link>
        <el-link type="success">成功链接</el-link>
        <el-link type="warning">警告链接</el-link>
        <el-link type="danger">危险链接</el-link>
        <el-link type="info">信息链接</el-link>
    </div>

    <div>
        <el-link :underline="false">无下划线</el-link>
        <el-link>有下划线</el-link>
    </div>

    <div>
        <el-link icon="el-icon-edit">编辑</el-link>
        <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
    </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="./node_modules/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="./node_modules/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data:  {

        }
    })
</script>
</html>